<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*通配符，通配整个页面所有的html元素*/
			*{
				padding: 0px;
				margin: 0px;
			}
			
			.parent{
				width: 940px;
				height: 1000px;
				border: 1px red solid;/*//边框的厚度,颜色,边框的样式*/
				margin: auto;
			}
			/*-------------顶部第一行----------------*/
			.top{
				height: 125px;
				/*border: 1px red solid;*/
			}
			
			.top_up_right{
				background-image: url(img/topmenu_bg.jpg);
				width: 395px;
				height: 25px;
				float: right;
				/*设定DIV里面的内容水平居中*/
				text-align: center;
			}
			/*去掉无序列表左边的小圆点*/
			.top_up_right ul li{
				list-style: none;
			}
			/*设置无序列表的显示方式*/
			.top_up_right ul li{
				display: inline;
			}
			
			/*去掉超链接下划线,设定默认颜色为灰色*/
			.top_up_right ul li a{
				text-decoration: none;
				color: gray;
			}
			/*设定超链接的悬浮状态*/
			.top_up_right ul li a:hover{
				color: orange;
			}
			/*清楚浮动对父div的影响*/
			.clear{
				clear: both;
			}
			/*顶部第二行*/
			.top_middle{
				height: 90px;
				/*border: 1px red solid;*/
			}
			.top_middle_left{
				float: left;
				width: 211px;
				height: 84px;
			}
			.top_middle_right{
				float: right;
				width: 365px;
				height: 41px;
				/*border: 1px red solid;*/
				margin-top: 49px;
				text-align: center;
			}
			
			.top_middle_right ul li{
				width: 87px;
				line-height: 41px;/*行高-块的内容垂直居中*/
				list-style: none;/*去掉小圆点*/
				display: inline-block;/*行级显示*/
				background-image: url(img/menu.jpg);
			}
			
			.top_middle_right ul li a{
				text-decoration: none;
				color: white;
			}
			.top_middle_right ul li:hover{
				background-image: url(img/menu_hover.jpg);
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="top">
				<div class="top_up">
					<div class="top_up_right">
						<ul>
							<li><a href="#">会员登录</a></li>
							<li><a href="#">会员注册</a></li>
							<li><a href="#">注销登录</a></li>
							<li><a href="#">关于我们</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="top_middle">
					<div class="top_middle_left">
						<img src="img/12574772601.jpg" />
					</div>
					<div class="top_middle_right">
						<ul>
							<li><a href="#">首页</a></li>
							<li><a href="#">我的餐车</a></li>
							<li><a href="#">我的订单</a></li>
							<li><a href="#">配送说明</a></li>
						</ul>
					</div>
				</div>
				<div class="top_bottom">
					<hr size="7" color="orangered" />
				</div>
			</div>
			
		</div>
		
		
		
	</body>
</html>
